{% load static %}
{% block css %}
<link rel="stylesheet" href="{% static 'css/account.css' %}" />
<style>
  .error_msg {
    color: red;
    position: absolute;
    font-size: 13px;
  }
  .ui_container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh; /* 使容器占满整个视口高度 */
  }
  .session__body {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  }
  .session-form {
    margin-left: 20px;
  }
  .form-group {
    margin-bottom: 10px;
  }
</style>
{% endblock %} {% block content %}
<div class="ui_container">
  <div class="session__body">
    <div class="session-sidebox col-md-6">
      <div class="session-sidebox__logo">
        <img alt="logo" src="/static/img/logo.png" />
      </div>
    </div>
    <div class="session-form col-md-6">
      <div class="header">
        <div class="col-md-9 larger">
          <span>用户登录</span>
        </div>
        <div class="col-md-3"></div>
      </div>
      <br />

      <form
        class="form-horizontal"
        action="/login/"
        accept-charset="UTF-8"
        method="post"
      >
        {% csrf_token %}
        <div class="form-group">
          <div class="col-sm-12">
            <input
              class="form-control"
              placeholder="工号"
              type="text"
              name="user_id"
            />
          </div>
        </div>
        <div class="form-group">
          <div class="col-sm-12">
            <input
              class="form-control"
              placeholder="请输入密码"
              type="password"
              name="user_pwd"
            />
          </div>
        </div>
        <div class="form-group d-flex align-items-end">
          <button class="btn btn-primary" type="submit" name="commit">
            登录
          </button>
          &nbsp;&nbsp;&nbsp;
          <!-- <span >
                    <a href="/add/">点此注册</a>
                </span> -->

          <span class="error_msg">{{ error }}</span>
        </div>
      </form>
    </div>
  </div>
</div>
{% endblock %} {% block js %}
<script>
  $(function () {
    $("#imageCode").click(function () {
      var oldSrc = $(this).attr("src");
      $(this).attr("src", oldSrc + "?");
    });
  });
</script>
{% endblock %}
